import React from 'react';
import {  Platform,StyleSheet, Text, View } from 'react-native';

const grid = 4;

const styles = StyleSheet.create({
  wrap: {
    flexDirection: 'row',
  },
  textCornerWrap: {
    overflow: 'hidden',
  },
  dot: {
    width: 2 * grid,
    height: 2 * grid,
    borderRadius: grid,
    backgroundColor: '#ff5b05',
    position: 'absolute',
    top: -1 * grid,
    right: -1 * grid,
  },
  dotSizelarge: {
    width: 4 * grid,
    height: 4 * grid,
    borderRadius: 2 * grid,
  },
  textDom: {
    paddingVertical: 0.5 * grid,
    paddingHorizontal: (Platform.OS === 'ios' ? 1.5 : 2) * grid,
    backgroundColor: '#ff5b05',
    borderRadius: 4 * 3,
    borderStyle: 'solid',
    position: 'absolute',
    top: -10,
    right: -15,
  },
  textCorner: {
    width: 18 * grid,
    backgroundColor: '#ff5b05',
    transform: [
      {
        rotate: '45deg',
      },
    ],
    position: 'absolute',
    top: 2 * grid,
  },
  textCornerlarge: {
    width: 26 * grid,
    top: 3 * grid,
  },
  text: {
    color: '#ffffff',
    textAlign: 'center',
  },
})

export default class Badge extends React.Component{
  static defaultProps = {
    size: 'small',
    overflowCount: 99,
    dot: false,
    corner: false,
    styles: styles,
  };

  render() {
    let {
      styles,
      style,
      children,
      text,
      size,
      overflowCount,
      dot,
      corner,
      ...restProps,
    } = this.props;
    text =
      typeof text === 'number' && text > overflowCount
        ? `${overflowCount}+`
        : text;

    if (dot) {
      text = '';
    }
    // fake styles
    const fakeStyles = styles ;
    const badgeCls = corner ? 'textCorner' : 'textDom';
    console.log('contentDom',badgeCls,`${badgeCls}${size}`,fakeStyles)
    const contentDom = !dot ? (
      <View
        {...restProps}
        style={[styles[badgeCls], fakeStyles[`${badgeCls}${size}`]]}
      >
        <Text style={[styles.text]}>{text}</Text>
      </View>
    ) : (
      <View {...restProps} style={[styles.dot, fakeStyles[`dotSize${size}`]]} />
    );

    return (
      <View style={[styles.wrap, style]}>
        <View style={[fakeStyles[`${badgeCls}Wrap`]]}>
          {children}
          {text || dot ? contentDom : null}
        </View>
      </View>
    );
  }
}


